<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问标签体</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#d1").click(function(){
                // 识别标签,本质上就是DOM中的innerHTML
                console.log($(this).html())
                // 相当于innerHTML=xxx
                $(this).html("<h2>这是修改后的内容</h2>")
            });
            $("#d2").click(function(){
                // 不识别标签,本质上就是DOM中的innerText
                console.log($(this).text())
                // 相当于innerText=xxx
                $(this).text("<h2>这是修改后的内容</h2>")
            });
        })
    </script>
</head>
<body>
<div id="d1" style="width: 200px;height: 100px;background-color: red;">
    <h2>这是div中的标题</h2>
</div>
<div id="d2" style="width: 200px;height: 100px;background-color: red;">
    <h2>这是div中的标题</h2>
</div>
</body>
</html>